<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息表</title>
</head>
<body>
    <label>第几页</label><input type="text" id="userPage" value="1">
    <label>取几行</label><input type="text" id="userCount" value="3">
    <input id="selectUser" type="button" value="查询" onclick="selectUser()">
    <select id="userSelect" >
    </select>
    </hr>
    <table >
        <thead>
            <tr><td th:text="序号"></td><td th:text="username"></td><td th:text="password"></td><td th:text="姓名"></td></tr>

        </thead>
        <tbody id="userTbody"></tbody>
    </table>
    <div th:text="${hello.hello}"></div>
    </hr>
    <div th:utext="${hello.hello}"></div>
</body>
<script type="text/javascript" th:src="@{/webjars/jquery/3.3.1-1/jquery.js}"></script>
<script type="text/javascript">
 function selectUser() {
     $("#userSelect").html('');
     $("#userTbody").html('');
     $.ajax({
         url: 'getUserList',
         type: 'get',
         data:{
             'page' : $("#userPage").val(),
             'count' : $("#userCount").val()
         },
         success: function (data) {
             /*alert(data.code);
             alert(data.message);*/
             $.each(data.data, function (index,user) {
                 $("#userSelect").append(("<option  value=" + user.id + ">" + user.username + "</option>"));
                 $("#userTbody").prepend("<tr><td>"+user.id+"</td><td>"+user.username+"</td><td>"+user.password+"</td><td>"+user.name+"</td></tr>")
             });
         }
     })
 }

</script>
</html>